<template>
    <br>
    <!-- v-model双向绑定 -->
    <input type="text" v-model="name">
    <br>
    <div>{{ handName }}</div>
    <div>{{ handerNameFun() }}</div>
    <br>
    <h2>数值：{{ num1 }}</h2>
    <button @click="changeNum1">监听修改数值</button>

</template>
<script lang="ts" setup>
    import {ref,computed,watch} from 'vue';
    let name = ref("");
    let num1 = ref(1);

    //watch监听函数,监视全部使用下面，监视对象局部属性，使用函数
    let stopWatch = watch(num1,(oldValue,newValue)=>{
        console.log("检测数值变化。"+oldValue,newValue);
        if(oldValue>10) {
            stopWatch();
        }
    },{deep:true})

    let changeNum1 = function() {
        num1.value ++;
    }
    //computed是计算函数
    let handName = computed(() => {
        if(name.value == "") {
            return "";
        }
        return "通过计算函数我的名字是："+name.value;
    })
    function handerNameFun() {
        if(name.value == "") {
            return "";
        }
        return "通过普通函数我的名字是："+name.value;
    }
</script>